<template>
    <!-- 头部导航 -->
    <header class="topnav">
        <!-- 左边导航 -->
        <div class="leftsidebar">
            <svg class="icon">
                <use xlink:href="#icon-caidan"></use>
            </svg>
        </div>
        <!-- 主要导航 -->
        <div class="mainbav">
            <!-- <ul>
                <li class="select"><a href="#">我的</a></li>
                <li><a href="#">发现</a></li>
                <li><a href="#">云村</a></li>
                <li><a href="#">视频</a></li>
            </ul> -->
            <input type="text" >
        </div>
        <!-- 右导航 -->
        <div class="rightsidebar">
            <svg class="icon">
                <use xlink:href="#icon-sousuo"></use>
            </svg>
        </div>
    </header>
</template>

<script setup>
import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed } from 'vue';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
/**
* 仓库
*/
const store = useStore();
/**
* 路由对象
*/
const route = useRoute();
/**
* 路由实例
*/
const router = useRouter();
//console.log('1-开始创建组件-setup')
/**
* 数据部分
*/
const data = reactive({})
onBeforeMount(() => {
    //console.log('2.组件挂载页面之前执行----onBeforeMount')
})
onMounted(() => {
    //console.log('3.-组件挂载到页面之后执行-------onMounted')
})
watchEffect(() => {
})
// 使用toRefs解构
// let { } = { ...toRefs(data) } 
defineExpose({
    ...toRefs(data)
})

</script>
<style scoped lang='less'>
// 头部导航
.topnav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 1rem;
    width: 100%;
    align-items: center;
    text-align: center;

    svg {
        width: 0.4rem;
        height: 0.4rem;
    }

    // 左边导航
    .leftsidebar {
        width: 1rem;
    }

    // 主要导航
    .mainbav {
        display: flex;
        flex: 1;
        justify-content: center;

        ul {
            display: flex;

            li {
                padding: 0.2rem;
            }
        }
        input{
            width: 100%;
            border-top-left-radius:0.2rem ;
            border-bottom-left-radius:0.2rem ;
            border-top-right-radius:0.2rem ;
            border-bottom-right-radius:0.2rem ;
            background-color: #ffffff;
        }
    }

    // 右边导航
    .rightsidebar {
        width: 1rem;
    }
}

// 头部主要导航 选中样式
.select {
    color: #000000;
    font-weight: 600;
}
</style>